<template>
	<view class="position-fixed-cover" :style="{'visibility': visible ? 'visible' : 'hidden'}">
		<view class="position-absolute-cover bg-dark-mask" @tap="handleCancel"></view>
		<view class="com-tooltip trans-100 trans-opacity position-absolute pt-20 pb-20 pl-20 pr-20" :style="[rootStyle]">
			<view v-if="list" class="pt-25 pb-25 y-flex y-row y-align-center border-radius-20"
			:style="{'background-color': bgColor}">
				<view class="y-flex y-align-center pl-40 pr-40"
				v-for="(item, index) in itemList" :key="index"
				@tap="handleTap(item, index, 'list')">
					<com-icon class="mb-10" :name="item.icon" size="35" :color="item.color" v-if="item.icon"></com-icon>
					<text class="fs-24" :style="{color: item.color}">{{item.label}}</text>
				</view>
			</view>
			<view v-if="shortcut" class="y-flex border-radius-20 mt-30"
			:style="{'background-color': bgColor}">
				<view class="y-flex y-row y-align-center pl-30 pr-30 pt-20 pb-20"
				:class="{'border-bottom-1': index < shortcutList.length - 1}"
				:style="{'border-bottom-color': _hexToRgba(item.color, .1)}" v-for="(item, index) in shortcutList"
				:key="index"
				@tap="handleTap(item, index, 'shortcut')">
					<com-icon :name="item.icon" size="40" :color="item.color" v-if="item.icon"></com-icon>
					<text class="fs-24 ml-30" :style="{color: item.color}">{{item.label}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { hexToRgba } from '@/assets/js/util.js'
	export default {
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			},
			textColor: {
				type: String,
				default: '#333'
			}
		},
		computed: {
			shortcutList () {
				return this.shortcut.map(item => {
					return Object.assign({}, {
						label: '',
						value: '',
						color: this.textColor,
						disabled: false
					}, typeof item == 'string' ? {label: item} : item)
				})
			},
			itemList () {
				return this.list.map(item => {
					return Object.assign({}, {
						label: '',
						value: '',
						color: this.textColor,
						disabled: false
					}, typeof item == 'string' ? {label: item} : item)
				})
			},
			rootStyle () {
				return {
					top: typeof this.top == 'number' ? (this.top - uni.upx2px(20)) + 'px' : '',
					left: typeof this.left == 'number' ? (this.left - uni.upx2px(20)) + 'px' : '',
					right: typeof this.right == 'number' ? (this.right + uni.upx2px(20)) + 'px' : '',
					bottom: typeof this.bottom == 'number' ? (this.bottom + uni.upx2px(20)) + 'px' : '',
					opacity: this.visible ? 1 : 0,
					// 'transform-origin': `${typeof this.top == 'number' ? 'top' : 'bottom'} ${typeof this.left == 'number' ? 'left' : 'right'} `,
					// transform: 'scale(' + (this.visible ? 1 : 0.2) + ')'
				}
			}
		},
		data () {
			return {
				list: [],
				shortcut: [],
				visible: false,
				top: null,
				left: null,
				right: null,
				bottom: null,
				success: null,
				fail: null,
				complete: null
			}
		},
		methods: {
			_hexToRgba (hex, opac) {
				return hexToRgba(hex, opac)
			},
			show ({ list, shortcut, success, fail, complete, left, top, right, bottom }) {
				this.list = list
				this.shortcut = shortcut
				this.success = success
				this.fail = fail
				this.complete = complete
				this.left = left
				this.top = top
				this.right = right
				this.bottom = bottom
				this.$nextTick(function () {
					this.visible = true
				})
			},
			handleTap (item, index, type) {
				this.success && this.success({
					current: index,
					type,
					detail: item
				})
				this.visible = false
			},
			handleCancel () {
				this.fail && this.fail()
				this.complete && this.complete()
				this.visible = false
			}
		}
	}
</script>

<style>
</style>